<template>
  <div class="walletList">
    <div class="clearfix li account">
      <div class="fl">
        <span class="title">{{$t('wallet.walletlist.subaccount_count')}}</span>
        <spinner v-if="loading" />
        <span v-else class="value">{{sub_count}}</span>
      </div>
      <div class="fr right">
        <router-link class="button" to="/wallet/walletcount">{{$t('wallet.walletlist.detail')}}</router-link>
      </div>
    </div>
    <ul>
      <li class="clearfix li" v-for="(v,k) in list" :key="k">
        <div class="fl">
          <span class="title">{{k.toUpperCase()}}{{$t('dashboard.earn')}}</span>
          <spinner v-if="loading" />
          <template v-else>
            <cu :val="v.all_money | divided8" :decimals="8" class="value"></cu>
            <span>{{k.toUpperCase()}}</span>
            <el-tooltip v-if="v.infoKey" :content="$t(v.infoKey)" placement="right">
              <i class="info-icon iconfont icon-gantanhao"></i>
            </el-tooltip>
          </template>
        </div>
        <div class="fr right">
          <router-link class="button" :to="'/wallet/my?type='+k">{{$t('wallet.walletlist.detail')}}</router-link>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { walletIncome } from '@/api';
import { mapGetters } from 'vuex';
import cu from '@/components/CountUp';
import spinner from '@/components/Spinner';

export default {
  components: {
    cu,
    spinner,
  },
  data() {
    return {
      noAddress: true,
      loading: true,
      sub_count: 0,
      list: {
        btc: {
          all_money: 0,
          count: 0,
          infoKey: 'wallet.walletlist.info',
        },
        // zec: {
        //   all_money: 0,
        //   count: 0,
        // },
        // buc: {
        //   all_money: 0,
        //   count: 0,
        // },
        // mut: {
        //   all_money: 0,
        //   count: 0,
        // },
      },
    };
  },
  computed: {
    ...mapGetters(['id']),
  },
  created() {
    this.walletIncome();
  },
  methods: {
    walletIncome() {
      walletIncome({ parent_uid: this.id })
        .then((res) => {
          if (res.data.status === 1) {
            const data = res.data.data;
            this.sub_count = res.data.sub_count;
            Object.keys(this.list).forEach((v) => {
              if (data[v]) {
                this.list[v] = Object.assign({}, this.list[v], data[v]);
              }
            });
          } else {
            this.$message.error(this.$t(`api.${res.data.errcode}`));
          }
          this.loading = false;
        })
        .catch(() => {
          this.$message.error(this.$t('error.catchError'));
          this.loading = false;
        });
    },
  },
};
</script>
<style scoped lang="scss">
.walletList {
  width: 100%;
  height: 100%;
  padding: 10px 60px 80px;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
  border: solid 1px #e0e0e0;
  border-radius: 5px;
  .li {
    border-bottom: 1px solid #e5e5e5;
    line-height: 76px;
    height: 76px;
    font-size: 18px;
    color: #333333;
    position: relative;
    text-align: left;
    overflow: hidden;
    a,.button {
      display: inline-block;
      font-size: 14px;
      border-radius: 5px;
      line-height: 40px;
      height: 40px;
      width: 100px;
      text-align: center;
    }
    .title {
      margin-right: 30px;
    }
    .value {
      font-size: 30px;
      color: #70c1b3;
      padding-right: 10px;
      margin-top: 5px;
      vertical-align: top;
    }
    .info-icon {
      color: #f7cc86;
    }
    .right {
      line-height: 76px;
      height: 76px;
      padding: 0 37px;
    }
    .button {
      background-color: #70c1b3;
      color: #fff;
      border: none;
      outline: none;
    }
    &.account {
      .value {
        color: #333;
      }
      .button {
        background-color: #fff;
        color: #247ba0;
      }
    }
  }
}
</style>
